$flex-params: (
	x: row,
	y: column,
	start: flex-start,
	center: center,
	around: space-around,
	between: space-between
);

@mixin flex($coor: null, $justify: null, $alignItems: null) {
	display: flex;
	@if $coor {
		flex-direction: map-get($flex-params, $coor);
	}
	@if $justify {
		justify-content: map-get($flex-params, $justify);
	}
	@if $alignItems {
		align-items: map-get($flex-params, $alignItems);
	}
}

// 使用混入
#container-flex {
	@include flex(x, start, center);
}

// 未使用混入
.flex {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
}

.flex-direction-row {
	@extend .flex;
	-webkit-box-direction: normal;
	-webkit-box-orient: horizontal;
	-moz-flex-direction: row;
	-webkit-flex-direction: row;
	flex-direction: row;
}
.flex-direction-column {
	@extend .flex;
	-webkit-box-direction: normal;
	-webkit-box-orient: vertical;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.flex-start {
	@extend .flex;
	-webkit-box-pack: start;
	-moz-justify-content: flex-start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
.flex-justify-content-center {
	@extend .flex;
	-webkit-box-pack: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.flex-end {
	@extend .flex;
	-webkit-box-pack: end;
	-moz-justify-content: flex-end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.flex-justify-content-between {
	@extend .flex;
	-webkit-box-pack: justify;
	-moz-justify-content: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.flex-justify-content-around {
	@extend .flex;
	-webkit-box-pack: around;
	-moz-justify-content: space-around;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}
.flex-justify-content-evenly {
	@extend .flex;
	-webkit-box-pack: evenly;
	-moz-justify-content: space-evenly;
	-webkit-justify-content: space-evenly;
	justify-content: space-evenly;
}
.flex-align-items-start {
	@extend .flex;
	-webkit-box-align: start;
	-moz-align-items: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
.flex-align-items-center {
	@extend .flex;
	-webkit-box-align: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	align-items: center;
}
.flex-align-items-end {
	@extend .flex;
	-webkit-box-align: end;
	-moz-align-items: flex-end;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}

.flex-align-items-baseline {
	@extend .flex;
	-webkit-box-align: baseline;
	-moz-align-items: baseline;
	-webkit-align-items: baseline;
	align-items: baseline;
}

.flex-align-self-end {
	@extend .flex;
	-webkit-box-align-self: end;
	-moz-align-self: flex-end;
	-webkit-align-self: flex-end;
	align-self: flex-end;
}

.flex-wrap {
	@extend .flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-nowrap {
	@extend .flex;
	-webkit-flex-wrap: nowrap;
	-moz-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	-o-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

.flex-all-center {
	@extend .flex;
	-webkit-box-pack: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	align-items: center;
}

.flex-full {
	flex: 1;
}

.flex-base {
	flex: auto 0 0;
}